<template>
    <view class='content'>
      <!-- <view class="head">
        <image src="/static/order-wait.png" />
        <view>待到店使用</view>
      </view> -->
        <view class="main">
            <view class="box">
                <view class="predetermine">
                    <view class="store df-c">
                        <image src="/static/order-md.png" />
                        <view>{{data.shopName}}</view>
                    </view>
                    <view class="desk-no df-c">
                        <image src="/static/order-tq.png" />
                        <view>{{data.billiardMainName}}</view>
                    </view>
                    <view class="time df-c">
                        <image src="/static/order-time.png" />
                        <view>{{dayjs(data.billStartTime).format('YYYY-MM-DD HH:mm')}} -- {{dayjs(data.billEndTime).format('YYYY-MM-DD HH:mm')}}</view>
                    </view>
                </view>
                <view class="total-price">
                   <view class="tit">
                        订单信息
                    </view>
                    <view class="price-tit">
                        <view>订单总价</view>
                        <view>¥{{(data.totalPrice && data.totalPrice / 100) || 0}}</view>
                    </view>
                    <view class="times">
                        <!-- <view class="item" v-for="item in data.items" :key="item.id">
                            <view>18:20-19:00</view>
                            <view>48元/1小时</view>
                            <view>{{item.price / 100}}元</view>
                        </view> -->
                    </view>
                    <!-- <view class="coupon">
                        <view>优惠券抵扣</view>
                        <view class="coupon-r">
                            <view class="coupon-num">¥80.00</view>
                        </view>
                    </view> -->
                    <view class="pay">
                        <view>实际付款</view>
                        <view class="pay-r">
                            <view class="pay-num">¥{{data.payPrice / 100}}</view>
                        </view>
                    </view>
                </view>
                <view class="notice">
                    <view class="tit">订单信息</view>
                    <view>订单编号：{{data.no}} </view>
                    <view>下单时间：{{dayjs(data.payTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
                </view>
                <!-- <view class="refund">
                    <view class="tit">退款规则</view>
                    <view>预订成功后，平台暂不支持修改订单。</view>
                    <view>
                        <text class="time">2023-03-19 05:00</text>
                        <text>前支持随时申请全额退款，逾期不可退款。</text>
                    </view>
                </view> -->
            </view>
        </view>
       <view class="footer" @click="onRefund" v-if="[50].includes(data.status)">
            <view class="btn">
                申请退款
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
import { onLoad, onShow } from "@dcloudio/uni-app";
import { orderDetail,billiardRefund } from "@/service/index";
import dayjs from 'dayjs';
const data = ref({});
const id = ref(null);
const init = ()=>{
    orderDetail({id:id.value}).then(res => {
        console.log(res);
        data.value = res;
    });
}
const onRefund = ()=>{
    uni.showModal({
	title: '提示',
	placeholderText: '请输入退款原因',
    editable:true,
	success: function (res) {
        console.log(res);
		if (res.confirm) {
			billiardRefund({
            orderId: data.value.id,
            applyReason: res.content
            }).then(res=>{
                uni.showToast({
                    title: '申请成功，退款将原路返回',
                    icon: 'success',
                })
                init();
            })
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});
    
}
onLoad((options) => {
    id.value = options.id;
    init();
});
</script>
<style lang='less' scoped>
.content {
    display: flex;
    flex-direction: column;
    height: 100vh;

    // padding: 24rpx;
    .df-c {
        display: flex;
        align-items: center;
    }
  .head{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
font-weight: 600;
color: #009A44;
    image{
      width: 48rpx;
      height: 50rpx;
      margin-right: 16rpx;
    }
  }
    .main {
        background-color: #F7F7F7;
        padding: 24rpx;
        flex: 1;
        height: 100%;
        overflow-y: auto;

        .predetermine {
            padding: 30rpx 26rpx;
            border-bottom: 2rpx solid #EEEEEE;
            background-color: #fff;

            .store {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #333333;
                margin-bottom: 24rpx;
            }

            .desk-no {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-bottom: 24rpx;
            }

            .time {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            image {
                width: 36rpx;
                height: 36rpx;
                margin-right: 16rpx;
            }
        }

        .total-price {
            padding: 30rpx 26rpx;
            border-bottom: 2rpx solid #EEEEEE;
            .tit {
                margin-bottom: 24rpx;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #333333;
            }
            .price-tit {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #000000;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10rpx;
            }

            .times {
                font-size: 26rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #666666;
                margin-bottom: 20rpx;

                .item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 10rpx;
                }
            }

            .coupon,.pay {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #000000;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .jt {
                    width: 18rpx;
                    height: 32rpx;
                    margin-left: 16rpx;
                }

                .coupon-r {
                    display: flex;
                    align-items: center;
                }

                .coupon-num {
                    color: #FF5D15;
                    font-weight: 600;
                }
                .pay-num{
                  font-weight: 600;
                  color: #009A44;
                }
            }
        }

        .notice {
            font-weight: 400;
            color: #666666;
            padding: 30rpx 26rpx;
            // border-bottom: 2rpx solid #EEEEEE;

            view {
                line-height: 48rpx;
            }

            .tit {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #000000;
                margin-bottom: 10rpx;
            }
        }

        .refund {
            font-weight: 400;
            color: #666666;
            padding: 30rpx 26rpx;

            view {
                line-height: 48rpx;
            }

            .tit {
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                color: #000000;
                margin-bottom: 10rpx;
            }

            .time {
                color: #FF5D15;
            }
        }
    }

    .footer {
    padding: 34rpx 26rpx;
    box-shadow: 0rpx -12rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
    background-color: #fff;
    .btn {
      position: relative;
      width: 100%;
      background: linear-gradient(315deg, #00B952 0%, #00E565 100%);
      border-radius: 60rpx;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      color: #fff;
      box-sizing: border-box;
    }
  }
}</style>